<template>
  <div class="wrap">
    <div class="cart-title">购物车</div>
    <div class="main" v-if="goodslist.length!==0">
      <div class="item" v-for="(item,index) in goodslist" :key="index">
        <img class="pic" :src="item.img_small_logo">
        <div class="content">
          <p>{{item.title}}</p>
          <div class="money_number">
            <span class="money">￥{{item.current_price}}</span>
            <div class="numbox">
              <span class="btn" @click="del" :data-goodsid="item.goods_id" :data-nub="item.cart_number">-</span>
              <span class="n">{{item.cart_number}}</span>
              <span class="btn" @click="add" :data-goodsid="item.goods_id" :data-nub="item.cart_number">+</span>
            </div>
          </div>
        </div>
        <div class="removebtn" :data-goodsid="item.goods_id" @click="removeitem">移除</div>
      </div>
      <div class="clear" @click="removeAll">清空购物车</div>
    </div>
    <div class="pay" @click="pay" v-if="goodslist.length!==0">立即支付</div>
    <div class="listnull" v-if="goodslist.length===0">
      <img src="@/assets/sn-cart-empty.png">
      <p>当前购物车为空</p>
    </div>
  </div>
  <FooterTab :pagename="pagename"></FooterTab>
</template>
<script>
// 引入全局组件FooterTab
import FooterTab from '../../components/FooterTab' 
import axios from 'axios'
import { useRouter } from 'vue-router'
import { ref } from 'vue'

// 获取购物车商品
const GetData=()=>{
  const goodslist = ref([])
  const router = useRouter()
  const getdata =async ()=>{
    // 拿到用户id
    const {userid,token}=localStorage
    // 没有登录
    if (!userid) {
      alert("未登录")
      router.push('login')
      return
    }
    const res = await axios({
      url:"http://localhost:8888/cart/list?id="+userid,
      method:"get",
      headers:{"Content-Type":'application/x-www-form-urlencoded',"authorization":token}
    })
    // 登录过期
    if (res.data.code === 401) {
      alert("登录过期")
      localStorage.clear()
      router.push('login')
      return
    }
    // 获取成功
    if (res.data.code===1) {
      goodslist.value=res.data.cart
    }
  }
  return {getdata,goodslist}
}
// 删除单条数据
const RemoveItem=(getdata)=>{
  const removeitem= async(e)=>{
    // 进入购物车说明登录了
    const {userid,token}=localStorage
    const goodsid=e.currentTarget.dataset.goodsid
    const res=await axios({
      url:"http://localhost:8888/cart/remove?goodsId="+goodsid+"&id="+userid,
      headers:{"authorization":token}
    })
    if(res.data.code===1){
      getdata()
    }
  }
  return {removeitem}
}
// 清空购物车
const RemoveAll=(getdata)=>{
  const removeAll= async(e)=>{
    const {userid,token}=localStorage
     const res=await axios({
        url:"http://localhost:8888/cart/clear?id="+userid,
        headers:{"authorization":token}
     })
     if(res.data.code===1){
        getdata()
     }
  }
  return {removeAll}
}
// 增加商品数量
const Add=(getdata)=>{
  const add = async(e)=>{
    const {userid,token}=localStorage
    const goodsid=e.currentTarget.dataset.goodsid
    let number = e.currentTarget.dataset.nub - 0
    number++
    const res=await axios({
      url:"http://localhost:8888/cart/number",
      method:"post",
      data:'id='+userid+'&goodsId='+goodsid+"&number="+number,
      headers:{"Content-Type":'application/x-www-form-urlencoded',
      "authorization":token
      }
    })
    if(res.data.code===1){
      getdata()
    }
  }
  return {add}
}
// 删减商品数量
const Del=(getdata)=>{
  const del= async(e)=>{
    const {userid,token}=localStorage
    const goodsid=e.currentTarget.dataset.goodsid
    let number = e.currentTarget.dataset.nub-0
    if(number===1){
      alert("就剩一件了，不需要就移除商品")
      return
    }
    number--
     const res=await axios({
        url:"http://localhost:8888/cart/number",
        method:"post",
        data:'id='+userid+'&goodsId='+goodsid+"&number="+number,
        headers:{"Content-Type":'application/x-www-form-urlencoded',
        "authorization":token
       }
     })
    if(res.data.code===1){
      getdata()  
    }
  }
  return {del}
}
// 支付
const Pay = ()=>{
  const pay= async(e)=>{
    const {userid,token}=localStorage
     const res=await axios({
        url:"http://localhost:8888/cart/pay",
        method:"post",
        data:'id='+userid,
        headers:{"Content-Type":'application/x-www-form-urlencoded',
        "authorization":token
       }
     })
    if(res.data.code===1){
      alert("支付成功")    
    }
  }
  return {pay}
}
export default {
  name:"CartView",
  components: {
    FooterTab
  },
  setup() {
    // 标记当前页面
    const pagename = 'cart'
    // 获取购物车商品
    const {getdata,goodslist} = GetData()
    getdata()
    // 移除商品
    const {removeitem}=RemoveItem
    (getdata)
    // 清空购物车
    const {removeAll}=RemoveAll(getdata)
    // 减少和增加商品的数量
    const {add} = Add(getdata)
    const {del} = Del(getdata)
    // 支付功能
    const {pay} = Pay()
    return {getdata,goodslist,pagename,removeitem, removeAll, del, add, pay}
  }
}
</script>
<style scoped lang="scss">
.cart-title{
  width: 100%;
  height: .45rem;
  position: fixed;
  top: 0;
  font-size: .175rem;
  text-align: center;
  line-height: .45rem;
  color: #333;
  background-color: white;
}
.main {
  background-color: #f5f5f9;
  margin: .34rem 0rem .38rem;
  padding: .12rem 0;
  .item {
    width: 3.4rem;
    background-color: white;
    border-radius: .1rem;
    margin: .05rem auto;
    padding: .1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .pic{
      width: .9rem;
      height: .9rem;
      border-radius: .06rem;
    }
    .content{
      width: 2rem;
      padding: 0 .05rem;
      p{
        font-size: 0.12rem;
        line-height: 0.175rem;
        font-weight: bold;
        color: #333;
        width:100%;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
      .money_number{
        display: flex;
        height: .3rem;
        justify-content: space-between;
        align-items: center;
        margin-top: .15rem;
        .money{
          font-size: .16rem;
          font-weight: bold;
          color: #333;
        }
        .numbox{
          display: flex;
          width: .88rem;
          height: .27rem;
          border:.005rem solid rgb(181, 181, 181);
          border-radius: .15rem;
          justify-content: space-between;
          align-items: center;
          padding: 0 .02rem;
          box-sizing: border-box;
          .btn{
            background-color: rgb(235, 235, 235);
            width: .22rem;
            height: .22rem;
            border-radius: 50%;
            text-align: center;
            line-height:.22rem;
            color: rgb(133, 133, 133);
          }
        }
      }
    }
    .removebtn{
      width: .3rem;
      height: .3rem;
      line-height: .3rem;
      background-color: rgb(212, 212, 212);
      padding: .05rem;
      color: rgb(255, 255, 255);
      border-radius: 50%;
      text-align: center;
    }  
  }  
}
.clear{
  width: 1rem;
  color: white;
  height: .3rem;
  text-align: center;
  background-color: orange;
  line-height: .3rem;
  font-size: .12rem;
  border-radius: .05rem;
  margin: .08rem auto;
}
.pay{
  position: fixed;
  right: 5%;
  bottom: .58rem;
  width: .75rem;
  height: .3rem;
  border-radius: .05rem;
  text-align: center;
  font-size: .12rem;
  line-height: .3rem;
  color: white;
  background-color: red;
}
.listnull{
  text-align: center;
  padding-top: 1rem;
  p{
     font-size: .15rem;
     color: #666;
  }
}
</style>